<template>
  <!-- 分页组件 -->
  <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[3, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageNumber: 1,
      pageSize: 3,
    };
  },
  methods: {
    // 改变条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageNumber = 1;
      this.pageSize = val;
      this.$emit("changeSize", { pageNumber: this.pageNumber, pageSize: val });
    },
    // 改变页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.$emit("changeNumber", { pageNumber: val, pageSize: this.pageSize });
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  width: 660px;
  margin: 10px auto;
}
// 当前页颜色
:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #1abc9c;
}
// 其他页颜色
:deep(.el-pagination .el-pager li) {
  border: 0.5px solid #e0e0e0;
  color: #8a8787;
  font-weight: 100;
  background: #fff;
  border-radius: 3px;
}
// 左右两边按钮颜色:左
:deep(.el-pagination .btn-prev) {
  background-color: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: 3px;
  color: #8a8787;
}
// 右
:deep(.el-pagination .btn-next) {
  background-color: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: 3px;
  color: #8a8787;
}
</style>